<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var search_value;
			var orcl_data;
			var yisao = 0;
			var danjuwai = 0;
			var i;

			function Search(a) {
				if(table_1.rows.length == 1) {

					mui.plusReady(function() {

						var data = {
							"type": "C1",
							"search_value": a,
						};
						//调用ajax  
						mui.post("http://192.168.38.2:8000/login/", //服务端的URL  
							data, // json 数据  
							function(orcl_data) {
								for(var i = 0; i < orcl_data.bm.length; i++) {
									var row = document.getElementById("table_1").insertRow(i + 1);
									var cell0 = row.insertCell(0);
									var cell1 = row.insertCell(1);
									var cell2 = row.insertCell(2);
									var cell3 = row.insertCell(3);
									cell1.innerHTML = orcl_data.bm[i];
									cell2.innerHTML = orcl_data.zcmc[i];
									cell3.innerHTML = orcl_data.ggxh[i];
								}
								document.getElementById("head_1").innerHTML = "流程编号:" + a + "&nbsp;&nbsp;&nbsp;总数：" + orcl_data.bm.length;
								document.getElementById("search").value = "";
							},
							'json'
						);

					});
				} //table_1 没有数据则长度为1，只有一个表头
				else {
					var rowNum = table_1.rows.length;
					var newFlag; //表中查询到值，标记
					newFlag = "";
					for(i = 0; i < rowNum; i++) {
						if(document.getElementById('table_1').rows[i].cells[1].innerHTML == document.getElementById("search").value) {
							if(document.getElementById('table_1').rows[i].cells[0].innerHTML == '') {
								document.getElementById('table_1').rows[i].cells[0].innerHTML = "OK";
								document.getElementById('table_1').rows[i].cells[0].style.backgroundColor = "#ADFEDC";
								yisao = yisao + 1;
							}

							newFlag = "x";

						};
					}
					if(newFlag == "") {

						mui.plusReady(function() {

							var data = {
								"type": "C2",
								"search_value": a,
							};
							//调用ajax  
							mui.post("http://192.168.38.2:8000/login/", //服务端的URL  
								data, // json 数据  
								function(orcl_data) {
									var row = document.getElementById("table_1").insertRow(rowNum);
									var cell0 = row.insertCell(0)
									var cell1 = row.insertCell(1);
									var cell2 = row.insertCell(2);
									var cell3 = row.insertCell(3);
									cell0.innerHTML = "NEW";
									cell1.innerHTML = a;
									cell2.innerHTML = orcl_data.zcmc[0];
									cell3.innerHTML = orcl_data.ggxh[0];
									cell0.style.backgroundColor = "#FF7575";

								},
								'json'
							);

						});
						danjuwai = danjuwai + 1;
					};

					document.getElementById("head_2").innerHTML = "已扫：" + yisao + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不在单据内：" + danjuwai;
					document.getElementById("search").value = "";

				}
			}

			function search_onkeydown() {
				if(event.keyCode == 13) {
					search_value = document.getElementById("search").value;
					Search(search_value);
					//					if(table_1.rows.length == 1) {
					//
					//						mui.plusReady(function() {
					//
					//							var data = {
					//								"type": "C1",
					//								"search_value": search_value,
					//							};
					//							//调用ajax  
					//							mui.post("http://192.168.38.2:8000/login/", //服务端的URL  
					//								data, // json 数据  
					//								function(orcl_data) {
					//									for(var i = 0; i < orcl_data.bm.length; i++) {
					//										var row = document.getElementById("table_1").insertRow(i + 1);
					//										var cell0 = row.insertCell(0);
					//										var cell1 = row.insertCell(1);
					//										var cell2 = row.insertCell(2);
					//										var cell3 = row.insertCell(3);
					//										cell1.innerHTML = orcl_data.bm[i];
					//										cell2.innerHTML = orcl_data.zcmc[i];
					//										cell3.innerHTML = orcl_data.ggxh[i];
					//									}
					//									document.getElementById("head_1").innerHTML = "流程编号:" + search_value + "&nbsp;&nbsp;&nbsp;总数：" + orcl_data.bm.length;
					//									document.getElementById("search").value = "";
					//								},
					//								'json'
					//							);
					//
					//						});
					//					} //table_1 没有数据则长度为1，只有一个表头
					//					else {
					//
					//						var rowNum = table_1.rows.length;
					//						var newFlag; //表中查询到值，标记
					//						newFlag = "";
					//						for(i = 0; i < rowNum; i++) {
					//							if(document.getElementById('table_1').rows[i].cells[1].innerHTML == document.getElementById("search").value) {
					//								if(document.getElementById('table_1').rows[i].cells[0].innerHTML == '') {
					//									document.getElementById('table_1').rows[i].cells[0].innerHTML = "OK";
					//									document.getElementById('table_1').rows[i].cells[0].style.backgroundColor = "#ADFEDC";
					//									yisao = yisao + 1;
					//								}
					//
					//								newFlag = "x";
					//
					//							};
					//						}
					//						if(newFlag == "") {
					//
					//							mui.plusReady(function() {
					//
					//								var data = {
					//									"type": "C2",
					//									"search_value": search_value,
					//								};
					//								//调用ajax  
					//								mui.post("http://192.168.38.2:8000/login/", //服务端的URL  
					//									data, // json 数据  
					//									function(orcl_data) {
					//										var row = document.getElementById("table_1").insertRow(rowNum);
					//										var cell0 = row.insertCell(0)
					//										var cell1 = row.insertCell(1);
					//										var cell2 = row.insertCell(2);
					//										var cell3 = row.insertCell(3);
					//										cell0.innerHTML = "NEW";
					//										cell1.innerHTML = search_value;
					//										cell2.innerHTML = orcl_data.zcmc[0];
					//										cell3.innerHTML = orcl_data.ggxh[0];
					//										cell0.style.backgroundColor = "#FF7575";
					//
					//									},
					//									'json'
					//								);
					//
					//							});
					//							danjuwai = danjuwai + 1;
					//						};
					//
					//						document.getElementById("head_2").innerHTML = "已扫：" + yisao + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不在单据内：" + danjuwai;
					//						document.getElementById("search").value = "";
					//					}

				}
			};

			mui.plusReady(function() {
				document.getElementById("button_1").addEventListener('tap', function() {
					var rowNum = table_1.rows.length;

					for(i = rowNum; i > 1; i--) {
						table_1.deleteRow(i - 1);
					}
					document.getElementById("head_1").innerHTML = '';
					document.getElementById("head_2").innerHTML = '';
					document.getElementById("head_1").innerHTML = 'sdafaaaaaaaaaaa';
				});

				document.getElementById('saomiao').addEventListener('tap', function() {
					mui.openWindow({
						url: '/barcode.html',
						id: 'barcode'
					});
				});

			});

			window.addEventListener('sm_code', function(evt) {
				var bar_resu = evt.detail.result;
				Search(bar_resu);

				alert(document.getElementById("button_1").innerHTML);
				//do something
			});
		</script>
	</head>
	<style>
		/* Border styles */
		
		#table_1 thead,
		#table_1 tr {
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: rgb(211, 202, 221);
		}
		
		#table_1 {
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: rgb(211, 202, 221);
		}
		/* Padding and font style */
		
		#table_1 td,
		#table_1 th {
			padding: 5px 10px;
			font-size: 12px;
			font-family: Verdana;
			color: rgb(95, 74, 121);
		}
		/* Alternating background colors */
		
		#table_1 tr:nth-child(even) {
			background: rgb(223, 216, 232)
		}
		
		#table_1 tr:nth-child(odd) {
			background: #FFF
		}
		
		#div_search {
			width: 92%;
			float: left
		}
		
		#saomiao {
			font-size: 25px;
			background: transparent;
			border: none;
			float: right
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div id="div_search">
				<div class="mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear" placeholder="查询" onkeydown="search_onkeydown()">
				</div>
			</div>
			<button type="button" class="mui-icon iconfont icon-saomiao" id="saomiao"></button>
		</header>
		<div class="mui-content">
			<div id="table_container">
				<p id="head_1"></p>
				<p id="head_2"></p>
			</div>

			<div id="table_container2">
				<table border="1" width="100%" id="table_1">
					<tr>
						<th>状态</th>
						<th>编码</th>
						<th>资产名称</th>
						<th>规格型号</th>
					</tr>
				</table>

			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-blue" id="button_1">CLEAR</button>
			</div>
		</div>
	</body>

</html>